<template>
  <div class="content">
    <div class="box">
      <!--左侧-->
      <div class="topic-box">
        <div class="path-wrap txtOf hLh30">
          <a class="c-999 fsize14" href="/">首页</a> /
          <a class="c-999 fsize14" href="/article">图文</a> /
          <a class="c-999 fsize14" href="javascript:void(0)">{{article.title}}</a>
        </div>

        <div class="topic">
          <div class="topic-title">{{article.title}}</div>
          <div class="topic-stat">
            <span class="div-times">{{article.timeDiffS}}</span>
            <span class="div-times">{{article.viewCount}}次阅读</span>
            <span class="div-times">{{article.voteCount}}人赞过</span>
          </div>
          <div class="line"></div>

          <div class="topic-content">
            <div class="u-content md-content">
              <div class="article">
                <!-- vue展示markdown内容,v-highlight自定义指令 -->
                <div v-highlight  v-html="htmlContent" class="markdown-body" id="content"></div>
              </div>


            </div>

            </div>

          </div>

        </div>

        <div class="share-box">
          <div class="share">
            <span style="margin-right: 20px">分享到</span>
            <a style="margin-right: 26px;"
               :href="qqShareUrl">
              <img width="40" height="40"
                   src=""
                   class="qq-icon">
            </a>

            <a
              :href="weiboShareUrl">
              <img width="40" height="40"
                   src=""
                   class="sina-icon">
            </a>
          </div>

<!--          <div :class="['vote-button',{'dz-end':isLick}]" @click="isLick=!isLick">-->
<!--            &lt;!&ndash; <i style="font-size: 35px;" class="el-icon-thumb"></i>&ndash;&gt;-->
<!--            <em class="icon35 dzIcon"></em>-->
<!--            <span>点赞</span>-->
<!--          </div>-->

<!--          <div :class="['like-button',{'sc-end':isCollect}]" @click="isCollect=!isCollect">-->
<!--            &lt;!&ndash;<i style="font-size: 35px;" class="el-icon-star-off"></i>&ndash;&gt;-->
<!--            <em class="icon35 scIcon-plus"></em>-->
<!--            <span>收藏</span>-->
<!--          </div>-->
        </div>
      </div>
<!--      <Backtop></Backtop>-->
    </div>
</template>

<script>
  import articleApi from "../../api/article";
  import { marked } from 'marked'
  import hljs from "highlight.js"; // 引入 highlight.js
  import "highlight.js/styles/monokai-sublime.css"; // 引入高亮样式 这里我用的是sublime样式
  // import showdown from 'showdown';
  // Vue.prototype.converter = new showdown.Converter();
  // import commonUtil from "@/utils/commonUtil";
  // import YCommentBlock from '@/components/commentBlock'
  // import order from '@/api/order'
  // import Backtop from '~/components/Backtop'

  //todo VueMarkdown换成mavonEditor 使用markdown-it解析md语法
  export default {
    data() {
      return {
        articleId: this.$route.params.id,
        article: {},
        fromCommentData: {
          page: 1,
          limit: 4,
          //targetType: this.$enum.COURSE_TYPE.ARTICLE.value,//业务类型 1course 2vod 3article
          targetId: this.$route.params.id,
          teacherId: ""
        },
        qqShareUrl: '',
        weiboShareUrl: '',
        isLick: false,
        isCollect: false,
        isBuy:false,
        htmlContent:'',
      }
    }, components: {
      // YCommentBlock,
      // Backtop
    }, head() {
      return {
        title: `${this.article.title || '加载中...'}`,
        meta: [
          {hid: 'keywords', name: 'keywords', content: this.article.title},
          {hid: 'description', name: 'description', content: this.article.articleDesc}
        ]
      }
    }, computed: {
      articleDesc() {
        return this.article.substring(0, 20);
      }
    }, mounted() {
      this.getData()
    }, methods: {
      getData() {
        articleApi.getById(this.articleId).then(res => {
          this.article = res.data.data.article
          this.htmlContent = marked(this.article.content)
          this.isBuy = res.data.data.isBuy
          this.fromCommentData.teacherId = this.article.teacherId
          this.article.timeDiffS = this.article.gmtCreate//commonUtil.changeTime(this.article.gmtCreate)
          this.qqShareUrl = `https://connect.qq.com/widget/shareqq/index.html?url=https%3A%2F%2Fedu.zsrey.cn%2Farticle%2F${this.article.id}&title=${this.article.title}&summary=${this.article.title}&pics=${this.article.coverImage}&site=在线教育`
          this.weiboShareUrl = `https://service.weibo.com/share/share.php?url=https%3A%2F%2Fedu.zsrey.cn%2Farticle%2F${this.article.id}&title=${this.article.title}&pic=${this.article.coverImage}`
        })
      },
      // toPay(){
      //     order.createOrder(this.$enum.COURSE_TYPE.ARTICLE.value,this.articleId).then(response => {
      //       console.log(response)
      //       if (response) {
      //         //订单创建成功，跳转到订单页面
      //         this.$router.push({path: `/order/${response}` })
      //       }
      //     })
      //   // this.$message.info("暂未开发")
      // }
    }
  }
</script>
<style scoped>
  /*文字背景色*/
  .u-content::selection{
    color: #fff;
    background: #088;
  }
  /*火狐61之前得添加-moz-前缀*/
  .u-content::-moz-selection {
    color:#fff;
    background:#088;
  }
  .hidden-article{
    max-height: 750px;overflow-y: hidden
  }
  .try-end-fold-page {
    text-align: center;
    box-sizing: border-box;
    position: absolute;
    padding-bottom: 50px;
    bottom: 0;
    z-index: 140;
    width: 100%;
    background-image: -webkit-linear-gradient(90deg, #fff, hsla(0, 0%, 100%, .99), hsla(0, 0%, 100%, .95), hsla(0, 0%, 100%, 0));
  }
  .lock-content{
    margin-top: 140px;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .lock-icon{
    margin: 10px 0;
    font-weight: 900;
    color: #00aafc;
  }
  .lock-text {
    display: inline-block;
    width: 167px;
    height: 40px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(252, 85, 49, 0.2);
    box-shadow: 0 2px 4px 0 rgba(252, 85, 49, 0.2);
    border-radius: 20px;
    border: 1px solid #00aafc;
    font-size: 14px;
    font-weight: 500;
    color: #00aafc;
    line-height: 40px;
    text-align: center;
    position: relative;
  }

  .lock-text:hover {
    background: rgba(252, 170, 252, 0.1);
  }
  .box {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    position: relative;
  }
  .box .topic-box, .box .topic-box .topic {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
  }
  .box .topic-box {
    width: 866px;
    padding-top: 0;
    margin-right: 30px;
  }
  .path-wrap {
    margin: 20px 0;
    color: #ccc;
    line-height: 30px;
  }
  .txtOf {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .box .topic-box .topic {
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: 8px;
    padding: 30px;
  }
  .box .topic-box, .box .topic-box .topic {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
  }
  .box .topic-box .topic .topic-title {
    width: 100%;
    height: auto;
    font-size: 30px;
    font-weight: 600;
    color: #333;
    line-height: 48px;
    margin-bottom: 10px;
  }
  .box .topic-box .topic .topic-stat {
    width: 100%;
    display: flex;
    float: left;
    flex-direction: row;
    align-items: center;
  }
  .box .topic-box .topic .topic-stat .div-times {
    height: 14px;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    line-height: 14px;
    margin-right: 30px;
  }
  .box .topic-box .topic .line {
    width: 100%;
    height: 1px;
    background: #e5e5e5;
    margin: 30px 0;
  }
  .box .topic-box .topic .topic-content {
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    color: #121212;
    line-height: 28px;
    position: relative;
  }

  .box .share-box {
    width: 304px;
    height: 312px;
    background: #fff;
    border-radius: 8px;
    margin-top: 74px;
    box-sizing: border-box;
    padding: 30px;
  }
  .box .share-box .share {
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .share a {
    cursor: pointer;
    width: 40px;
    height: 40px;
  }
  .box .share-box .vote-button, .like-button span {
    font-size: 16px;
    font-weight: 400;
    color: #666;
    line-height: 16px;
  }
  .box .share-box .vote-button {
    margin-top: 50px;
    margin-bottom: 30px;
    width: 244px;
    height: 56px;
    border-radius: 8px;
    border: 1px solid #ccc;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .dzIcon {
    background-position: -143px -244px;
  }
  .box .share-box .like-button {
    margin-top: 50px;
    margin-bottom: 30px;
    width: 244px;
    height: 56px;
    border-radius: 8px;
    border: 1px solid #ccc;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .scIcon-plus {
    background-position: -275px -244px;
  }
  .box .share-box .vote-button, .like-button span {
    font-size: 16px;
    font-weight: 400;
    color: #666;
    line-height: 16px;
  }
  .goTop{
    position: fixed;
    padding: 10px;
    right: 25px;
    bottom: 60px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 0 6px rgb(0 0 0 / 12%);
  }

  .icon35 {
    display: inline-block;
    height: 35px;
    width: 35px;
    vertical-align: middle;
  }

  em, i {
    font-style: normal;
  }
em {
    background: url(/assets/img/icon.1108852.png) no-repeat;
  }

  /*.article {*/
  /*  width: 890px;*/
  /*  margin: 30px auto;*/
  /*  overflow: hidden;*/
  /*}*/

  /*!* markdown 行号的样式 *!*/
  /*#content li {*/
  /*  list-style: decimal;*/
  /*}*/

  /*.article-con div pre {*/
  /*  position: relative;*/
  /*  padding: 0 29px;*/
  /*  overflow: hidden;*/
  /*  font-size: 90%;*/
  /*  line-height: 1.9;*/
  /*  background: #282c34;*/
  /*}*/

  /*.article-con div pre code {*/
  /*  padding: 0.4em;*/
  /*}*/

  /*.article-con div .pre-numbering {*/
  /*  position: absolute;*/
  /*  top: 0;*/
  /*  left: 0;*/
  /*  width: 29px;*/
  /*  padding: 9px 7px 12px 0;*/
  /*  border-right: 1px solid #C3CCD0;*/
  /*  background: #282c34;*/
  /*  text-align: right;*/
  /*  font-size: 16px;*/
  /*  line-height: 1.45;*/
  /*}*/

  /*.pre-numbering li{*/
  /*  list-style:none;*/
  /*  font-family: Menlo, monospace;*/
  /*  color: #abb2bf;*/
  /*}*/

</style>
